import { Form, Input, Button, Checkbox,Card ,message} from 'antd';
import { UserOutlined, LockOutlined} from '@ant-design/icons';
import 'antd/dist/antd.css';
import './login.css'
import React from 'react'
import loginServer from './loginService';
import axios from 'axios';
import qs from "qs" 
class Login extends React.Component{
    formRef = React.createRef();
    constructor(props){
        super(props);
        this.state={
          data:{},
  
        }
    }
    checkName=()=>{
        
    }
    onFinish = (e) => {
    console.log('Received values of form: ', e);
    console.log('Received values of form: ', this.formRef);
    let data= {password: "mayikt",username: "mayikt_admin",client_id:'cms',client_secret:'secret',grant_type:'password'};
    // axios.get('http://127.0.0.1:8087/oauth/token',{password: "mayikt",username: "mayikt_admin",client_id:'cms',client_secret:'client_secret',client_secret:'password'})
//     axios({
//           url: 'http://127.0.0.1:8087/oauth/token',
//           method: 'post',
//           headers: {
//           'Content-Type': 'application/x-www-form-urlencoded',
//           'x-helios-client': 'web',
//           },
//           data: qs.stringify(data),
//         }).then(res=>{
// console.log(res);
//         });
    this.formRef.current.validateFields().then(values=>{
      // let data={...values}
      let data=JSON.stringify(values)
      console.log("rt1")
      console.log(data)
      let data1={...values}
      console.log("rt2")
      console.log(data1)
      console.log("rt13")
      console.log(values)
      // axios.get('http://127.0.0.1:8087/oauth/token',{password: "mayikt",username: "mayikt_admin",client_id:'cms',client_secret:'client_secret',client_secret:'password'})
      axios({
        url: 'http://127.0.0.1:8070/oauth/token',
        method: 'get',
        headers: {
          'x-helios-client': 'web',
          'Content-Type': 'application/json;charset=UTF-8',
          Accept: 'application/json',
        },
        params: {...values,client_id:'cms',client_secret:'secret',grant_type:'password'},
      })
        .then(res => {
          console.log("rt4")
          console.log(res)
          window.sessionStorage.removeItem('token');
          window.sessionStorage.removeItem('refresh_token');
          window.sessionStorage.setItem('token', res.data.access_token);
          window.sessionStorage.setItem('refresh_token', res.data.refresh_token);
          this.props.history.push('/admin');
          // window.localStorage.setItem('user', JSON.stringify({ username, password, remember }));
          // this.props.dispatch({
          //   type: 'user/setToken',
          //   token: res.data.access_token,
          // });
          // this.redirect();
         
          // this.redirect();
        })
        .catch(e => {
          console.log("rt5")
          message.error(e.response.data.message);
          this.setState({ loading: false });
        });
      // if(values.username.length>4){
      //   message.error("用户名不可大于四");
      // }
      // else{
      //   message.success("登陆成噢");
      //   loginServer.setToken("ok");
      //   this.props.history.push('/admin');
      // }
      // this.props.history.push('/admin');
    })
  };
    render(){
  

  return (
     
     <Card className='login-dy-form'>
    <Form
    ref={this.formRef}
    name="normal_login"
    style={{marginLeft:'10em',width:'60%',height:'80%'}}
    // className="login-form"
    initialValues={{
      remember: true,
    }}
    onFinish={e=>this.onFinish(e)}
  >
    <Form.Item
      name="username"
      lable="用户名"
      rules={[
        {
          required: true,
          message: 'Please input your Username!',
        },
        {
            validator: (rule,value,callback)=>{
              if(value.length>=2){
                callback();
              }else{
  callback("用户名不能少于2")
              }
              }
        }
      ]}
    >
      <Input prefix={<UserOutlined />} 
      size='large'
       style={{width:400,height:70,marginTop:20}}
      placeholder="Username" />
    </Form.Item>
    <Form.Item
      lable="密码"
      name="password"
      rules={[
        {
          required: true,
          message: 'Please input your Password!',
        },
      ]}
    >
      <Input
        prefix={<LockOutlined  />}
        type="password"
        size='large'
        style={{width:400,height:70,marginTop:20}}
        placeholder="Password"
      />
    </Form.Item>
    <Form.Item style={{display:'flex',justifyContent:'space-around'}}>
      <div style={{float: 'left'}}>
      <Form.Item name="remember" valuePropName="checked">
        <Checkbox ><font size='4'>记住我</font></Checkbox>
      </Form.Item>
      </div>
      <div style={{float: 'left'}}>
      <a className="login-form-forgot" href="">
      <font size='4'>&nbsp;&nbsp;&nbsp;&nbsp;忘记密码</font> 
     
      </a>
      </div>
    </Form.Item>
    
    <Form.Item>
      <Button type="primary" size='large' htmlType="submit" className="login-form-button">
        登录
      </Button>
       <a href=""><font size='4'>&nbsp; &nbsp;&nbsp;  &nbsp;注册</font></a>
    </Form.Item>
  </Form>
  </Card>
  
  );
}
};
export default Login;
